<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登 录</title>
    <link rel="stylesheet" href="component/pear/css/pear.css"/>
    <link rel="stylesheet" href="admin/css/other/login.css"/>
</head>
<!-- 代 码 结 构 -->
<body background="admin/images/background2.svg" style="background-size: cover;">
<form class="layui-form" action="javascript:void(0);">
    <div class="layui-form-item">
        <img class="logo" src="admin/images/logo.png"/>
        <div class="title">Repast Admin</div>
        <div class="desc">
            就 餐 管 理 系 统
        </div>
    </div>
    <div class="layui-form-item">
        <input id="username" name="username" placeholder="用 户 名 : " type="text" hover class="layui-input" required
               lay-verify="username"/>
    </div>
    <div class="layui-form-item">
        <input id="password" name="password" placeholder="密 码 : " type="password" hover class="layui-input" required
               lay-verify="password"/>
    </div>
    <div class="layui-form-item">
        <input placeholder="验证码 : " name="captcha" id="captcha" hover class="code layui-input layui-input-inline"
               required lay-verify="captcha"/>
        <img src="/captcha" class="captchaImage" id="captchaImage" onclick="this.src=this.src+'?'+Math.random()"
             title="点击刷新"/>
    </div>
    <div class="layui-form-item">
        <input type="checkbox" id="rememberme" name="rememberme" title="记住密码" lay-skin="primary" checked>
    </div>
    <div class="layui-form-item">
        <button class="pear-btn pear-btn-success login" lay-submit lay-filter="formLogin">
            登 入
        </button>
    </div>
</form>
<script src="component/layui/layui.js"></script>
<script>
    layui.use(['form', 'element', 'jquery'], function () {
        var form = layui.form;
        var element = layui.element;
        var $ = layui.jquery;


        form.verify({
            username: function (value) {
                if (value.length <= 0) {
                    return '用户名不能为空';
                }
            },
            password: function (value) {
                if (value.length <= 0) {
                    return '密码不能为空';
                }
            },
            captcha: function (value) {
                if (value.length <= 0) {
                    return '验证码不能为空';
                }
                if (value.length !== 4) {
                    return '请输入正确格式的验证码';
                }
            }
        })

        form.on('submit(formLogin)', function () {
            $.ajax({
                url: '/login',
                type: 'post',
                dataType: 'text',
                data: {
                    username: $('#username').val(),
                    password: $('#password').val(),
                    captcha: $('#captcha').val()
                    // rememberme:$('#rememberme').val()
                },
                success: function (result) {
                    var restjson = JSON.parse(result)
                    if (restjson.success) {
                        layer.msg(restjson.msg, {icon: 1, time: 1000}, function () {
                            location.href = "/api";
                        });
                    } else {
                        layer.msg(restjson.msg, {icon: 2, time: 1000}, function () {
                            $("#captchaImage").attr("src", "/captcha" + "?" + Math.random());
                        });
                        return false;
                    }
                }
            })
            return false;
        });
    })
    if (window != top) {
        top.location.href = location.href;
    }
</script>
</body>
</html>